<template>
    <van-list @load="onLoad" v-model="loading">
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        size="large"
      >
        <!-- 只有一张图片的文章信息 -->
        <div class="list_1">
          <div class="title_label">
            <div class="title">{{ item.title }}</div>
            <div class="label">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate }}</span>
            </div>
          </div>
          <img class="van-image" v-if="item.cover.images[0]" :src="item.cover.images[0]" referrerPolicy="no-referrer"/>
        </div>
        <!-- 只有一张图片的文章信息 -->
      </van-cell>
    </van-list>
  </template>
  <script>
  export default {
    props: {
      channel: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        loading: false,
        finished: false,
        timestamp:null,
        list: [], //文章的列表数据
      };
    },
  
    mounted() {
      console.log(this.channel.id);
    },
  
    methods: {
      //请求列表的数据
      onLoad() {
        //请求文章的列表数据
        //请求文章列表
        let url = `/v1_1/articles?channel_id=${this.channel.id}&timestamp=${this.timestamp || Date.now()}&with_top=1`;
  
        //axios数据请求结果
        this.$axios.get(url).then((res) => {
          console.log(res);
          //把获取到的数据，赋给文章列表list
          // this.list = res.data.results;
          let {results} = res.data;
          //把新获取到的数据追加到当前列表的后面即可
          this.list.push(...results);
  
          if(results.length){
              this.timestamp = res.data.pre_timestamp;
          }
          this.loading = false;
        });
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .van-list {
    padding-bottom: 50px;
    .van-cell {
      width: 100%;
      border-bottom: #ccc 1px solid;
      //只有一张图片的css样式
      .list_1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .title_label {
          width: 70%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .label {
            color: #808080;
            width: 100%;
            display: flex;
            justify-content: space-between;
          }
        }
        .van-image {
          width: 25%;
        }
      }
  
      .list_3 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .img_list {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
        .label {
          color: #808080;
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  </style>